import React from 'react';

const DimensionsSelector = ({
                                processCount,
                                resourceTypeCount,
                                onProcessCountChange,
                                onResourceTypeChange
                            }) => (
    <div className="dimensions-selector">
        <div className="input-group">
            <label>
                <span className="label-text">进程数量:</span>
                <input
                    type="number"
                    min="1"
                    max="20"
                    value={processCount}
                    onChange={(e) => {
                        const value = parseInt(e.target.value, 10);
                        if (!isNaN(value)) {
                            onProcessCountChange(Math.min(Math.max(value, 1), 20));
                        }
                    }}
                />
            </label>
        </div>

        <div className="input-group">
            <label>
                <span className="label-text">资源类型:</span>
                <input
                    type="number"
                    min="1"
                    max="10"
                    value={resourceTypeCount}
                    onChange={(e) => {
                        const value = parseInt(e.target.value, 10);
                        if (!isNaN(value)) {
                            onResourceTypeChange(Math.min(Math.max(value, 1), 10));
                        }
                    }}
                />
            </label>
        </div>

        <div className="presets">
            <p>常用预设:</p>
            <div className="preset-buttons">
                <button onClick={() => {
                    onProcessCountChange(3);
                    onResourceTypeChange(2);
                }}>小型系统 (3进程, 2资源)</button>

                <button onClick={() => {
                    onProcessCountChange(5);
                    onResourceTypeChange(3);
                }}>中型系统 (5进程, 3资源)</button>

                <button onClick={() => {
                    onProcessCountChange(8);
                    onResourceTypeChange(5);
                }}>大型系统 (8进程, 5资源)</button>
            </div>
        </div>
    </div>
);

export default DimensionsSelector;